<template>
  <div>
    <el-form
      class="form"
      ref="form"
      :model="form"
      label-width="80px"
      :label-position="'left'"
    >
      <el-form-item :label="t('真实姓名')">
        <!-- <span class="label">{{ userInfo.nickname }}</span> -->
        <el-col :span="8">
          <el-input v-model="form.user_name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item :label="t('身份证号')">
        <!-- <span class="label">1****************9</span> -->
        <el-col :span="8">
          <el-input v-model="form.id_no"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item :label="t('银行卡号')">
        <el-col :span="8">
          <el-input type="number" v-model="form.bank_no"></el-input>
        </el-col>
        <span class="bank-tip ft16" type="primary">{{ t("支持银行") }}</span>
      </el-form-item>
      <el-form-item :label="t('手机号码')">
        <el-col :span="5">
          <el-input type="number" v-model="form.mobile"></el-input>
        </el-col>
        <span class="phone-tip ft16">{{
          t("请填写该卡在银行预留的手机号码")
        }}</span>
      </el-form-item>
      <el-form-item :label="t('验证码')">
        <el-col :span="4">
          <el-input type="number" v-model="form.code"></el-input>
        </el-col>
        <el-button
          class="code-btn"
          @click="get_code()"
          :loading="count_down.disable"
          >{{ count_down.txt }}</el-button
        >
      </el-form-item>
      <el-form-item>
        <span class="subit-btn" type="text" @click="on_submit()">{{
          t("确定")
        }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addBankCard, editBankCard } from "@/utils/api";
export default {
  props: {
    card_item: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      form: {
        user_name: "",
        id_no: "",
        bank_no: "",
        mobile: "",
        // code: ""
      },
      count_down: {
        disable: false,
        txt: this.t("获取验证码"),
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  mounted() {
    if (this.card_item) {
      this.form = this.$util.deepClone(this.card_item);
    }
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的银行卡.${v}`);
    },
    get_code() {
      this.count_down.disable = true;
      let number = 60;
      this.count_down.txt = number;
      let timer = setInterval(() => {
        number--;
        this.count_down.txt = number;
        if (number == 0) {
          this.count_down.txt = this.t("获取验证码");
          this.count_down.disable = false;
          clearInterval(timer);
          timer = null;
        }
      }, 1000);
    },
    on_submit() {
      if (!this.card_item) {
        addBankCard(this.form).then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.$emit("addSuccess");
          }
        });
      } else {
        editBankCard(this.form).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.$emit("addSuccess");
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.form {
  /deep/ .el-form-item__label {
    color: #0a0a0b;
    font-size: 16px;
  }

  .label {
    font-size: 16px;
    color: #222;
  }

  .bank-tip {
    margin-left: 15px;
    color: #228aff;
    cursor: pointer;
  }

  .phone-tip {
    margin-left: 10px;
    color: #666;
  }

  .code-btn {
    margin-left: 20px;
    display: inline-block;
    background: #e5e5e5;
    font-size: 16px;
    color: #0a0a0b;
    padding: 0px 23px;
    border-radius: 4px;
    line-height: 40px;
    cursor: pointer;
  }

  .subit-btn {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    background: #ff5757;
    border-radius: 10px;
    padding: 0px 78px;
    // height: 54px;
    line-height: 54px;
  }
}

.ft16 {
  font-size: 16px;
}

/deep/ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
